<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2023-12-6
  Time: 上午 08:09
  To change this template use File | Settings | File Templates.
--%>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>导航栏</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="页面描述信息">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 导入CSS -->
    <link href="${pageContext.request.contextPath}/other/style/reception_desk/navigation_bar.css" rel="stylesheet"
          type="text/css"/>
    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/reception_desk/shopping_cart.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/reception_desk/index.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/reception_desk/commodity.js"></script>
    <script src="${pageContext.request.contextPath}/other/scripts/reception_desk/navigation_bar.js"></script>
</head>
<body>
<nav>
    <div class="home" >
        <div class="front-page">
            <!-- 导航栏 -->
            <div class="navigation-bar">
                <div class="limit-bar">
                    <div class="main-body">
                        <ul>
                            <li><a href="#">小米商城</a></li>
                            <li><span></span></li>
                            <li><a href="#">MIUI</a></li>
                            <li><span></span></li>
                            <li><a href="#">loT</a></li>
                            <li><span></span></li>
                            <li><a href="#">云服务</a></li>
                            <li><span></span></li>
                            <li><a href="#">天星科技</a></li>
                            <li><span></span></li>
                            <li><a href="#">有品</a></li>
                            <li><span></span></li>
                            <li><a href="#">小爱开放平台</a></li>
                            <li><span></span></li>
                            <li><a href="#">企业团购</a></li>
                            <li><span></span></li>
                            <li><a href="#">资质证照</a></li>
                            <li><span></span></li>
                            <li><a href="#">协议规则</a></li>
                            <li><span></span></li>
                            <li><a href="#">下载app</a></li>
                            <li><span></span></li>
                            <li><a href="#">Select Location</a></li>
                        </ul>
                    </div>
                    <div class="main-personal">
                        <ul style="margin-left: 14px;min-height: 1px;">
                            <jsp:useBean id="accountId" scope="request" type="java.lang.String"/>
                            <jsp:useBean id="name" scope="request" type="java.lang.String"/>
                            <jsp:useBean id="id" scope="request" type="java.lang.Integer"/>
                            <c:if test="${accountId != 0}">
                                <li class="account-name" account-id="${accountId}" name="${name}" id="${id}">
                                    <a target="_blank"
                                       style="text-align: center;margin-top: 11px;display: inline-flex;">
                                            ${name}
                                        <img src="http://localhost:8083/resource_packs/images/drop_down.png"
                                             alt="下拉菜单" class="drop-down-menu-img">
                                    </a>
                                </li>
                                <li><span></span></li>
                                <li><a href="#" class="order">信息通知</a></li>
                                <li><span></span></li>
                                <li><a href="#" class="order">我的订单</a></li>
                            </c:if>
                            <c:if test="${accountId == 0}">
                                <li class="name-row">
                                    <a href="${pageContext.request.contextPath}/login">登陆</a>
                                </li>
                                <li>
                                    <span></span>
                                </li>
                                <li>
                                    <a href="${pageContext.request.contextPath}/login?menu=1"
                                       class="notification">注册</a>
                                </li>
                            </c:if>
                        </ul>
                    </div>
                    <div class="shopping-cart">
                        <a href="${pageContext.request.contextPath}/shopping/cart?accountId=${accountId}"
                           class="shopping-cart-text" target="_blank"></a>
                    </div>
                    <div class="drop-down-menu" style="display: none">
                        <ul account-id="${accountId}"
                            name="${name}" information-id="${id}">
                            <li class="go-personal-center" menu="3">个人中心</li>
                            <li class="go-personal-center" menu="2">评价晒单</li>
                            <li class="go-personal-center" menu="5">我的喜欢</li>
                            <li class="go-personal">小米账户</li>
                            <li class="login-out">退出登录</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 导航栏 -->

            <!-- 网页主题内容 -->
            <div class="navigation-bar-body">
                <!-- 导航栏 搜索部分 -->
                <div class="body-search">
                    <div class="logo"><img src="http://localhost:8083/resource_packs/images/logo.png" alt="小米LoGo">
                    </div>
                    <div class="navigation-bar-index">
                        <ul>
                            <li style="width: 125px;">
                                <a href="#" class="category" style="display: none;">
                                    全部商品分类
                                </a>
                            </li>
                            <li>
                                <a href="#" class="category" data-index="1,Xiaomi">
                                    Xiaomi手机
                                </a>
                            </li>
                            <li>
                                <a href="#" class="category" data-index="1,Redmi">
                                    Redmi&nbsp;手机
                                </a>
                            </li>
                            <li>
                                <a href="#" class="category" data-index="2,14">
                                    电视
                                </a>
                            </li>
                            <li>
                                <a href="#" class="category" data-index="2,48">
                                    笔记本
                                </a>
                            </li>
                            <li>
                                <a href="#" class="category" data-index="2,11">
                                    平板
                                </a>
                            </li>
                            <li>
                                <a href="#" class="category" data-index="2,22">
                                    空调
                                </a>
                            </li>
                            <li>
                                <a href="#" class="category" data-index="2,86">
                                    路由器
                                </a>
                            </li>
                            <li>
                                <a href="#" class="category">
                                    服务中心
                                </a>
                            </li>
                            <li>
                                <a href="#" class="category">
                                    社区
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="search-frame">
                        <form class="search-from">
                            <span>
                                <label>
                                    <input type="text" class="search-input" placeholder="Redmi K70 Pro">
                                </label>
                            </span>
                            <div class="search-img"><a><img
                                    src="http://localhost:8083/resource_packs/images/search_%23fff.png"
                                    alt="搜索按钮"></a></div>
                        </form>
                    </div>
                </div>
                <!-- 导航栏 搜索部分 -->

                <!-- 隐藏部分 -->
                <div class="hidden-content" style="display: none">
                    <div class="content-cell-phone">
                        <ul class="commodity-type-ul" account-id="${accountId}"
                            name="${name}" information-id="${id}">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="levitation">
        <ul>
            <li>
                <div class="app-icon" style="display: none;">
                    <img src="http://localhost:8083/resource_packs/images/app_icon.png" alt="小米APP二维码">
                    <span>扫码领取新人百元礼包</span>
                </div>
                <div class="levitation-options phone-app">
                    <img src="http://localhost:8083/resource_packs/images/phone_%23333.png" alt="手机小米商城APP">
                    <span>手机APP</span>
                </div>
            </li>
            <li>
                <div class="levitation-options go-personal-center" menu="3">
                    <img src="http://localhost:8083/resource_packs/images/personal_center_%23333.png" alt="个人中心">
                    <span>个人中心</span>
                </div>
            </li>
            <li>
                <div class="levitation-options go-personal-center" menu="8">
                    <img src="http://localhost:8083/resource_packs/images/after_sales_service_%23333.png"
                         alt="售后服务">
                    <span>售后服务</span>
                </div>
            </li>
            <li>
                <div class="levitation-options">
                    <img src="http://localhost:8083/resource_packs/images/customer_%23333.png" alt="人工客服">
                    <span>人工客服</span>
                </div>
            </li>
            <li>
                <div class="levitation-options levitation-shopping-cart" account-id="${accountId}">
                    <img src="http://localhost:8083/resource_packs/images/shopping_cart_%23333.png" alt="购物车">
                    <span>购物车</span>
                </div>
            </li>
            <li class="return-top">
                <a class="levitation-options top-options" style="display: none;">
                    <img src="http://localhost:8083/resource_packs/images/top_%23333.png" alt="返回顶上"
                         style="margin-top: 10px;">
                    <span style="margin-top: 5px;display: block;">回顶部</span>
                </a>
            </li>
        </ul>
    </div>
</nav>
</body>
</html>
